<template>
  <el-dialog title="积分明细" v-model="openDetailDialog" width="950px" append-to-body>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="申报积分" name="first">
        <div class="detailTop">
          <div>
            <el-button type="danger" icon="Download" @click="handleExport">导出</el-button>
          </div>
          <div>
            总积分：{{ scoreSumVal }}分
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-table v-loading="loading" :data="orgScoreList">
        <el-table-column label="积分规则" align="left" prop="title" min-width="300px"/>
        <el-table-column label="申报时间" align="left" prop="createTime" width="130px"/>
        <el-table-column label="申报周期" align="left" prop="cycle" width="130px">
          <template #default="scope">
            <!-- 0：月度；1：季度；2：半年 3：年度 -->
            <div v-if="scope.row.cycle==0">月度
              <el-select v-model="scope.row.cycleValue" disabled style="width: 90%;">
                  <el-option
                    v-for="dict in monthOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
              </el-select>
            </div>
            <div v-else-if="scope.row.cycle==1">季度
              <el-select v-model="scope.row.cycleValue" disabled style="width: 90%;">
                  <el-option
                    v-for="dict in jiDuOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
              </el-select>
            </div>
            <div v-else-if="scope.row.cycle==2">半年
              <el-select v-model="scope.row.cycleValue" disabled style="width: 90%;">
                  <el-option
                    v-for="dict in halfYearOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
              </el-select>
            </div>
            <div v-else-if="scope.row.cycle==3">年度
              <el-input v-model="scope.row.cycleValue" style="width: 90%;" disabled></el-input>
            </div>
            <div v-else></div>
        </template>
        </el-table-column>
        <el-table-column label="申报分数" align="left" prop="addScore" width="90px"/>
        <el-table-column label="原因" align="left" prop="remark" width="90px"/>
        <el-table-column label="审核状态" align="left" prop="approvalStatus" width="90px">
          <template #default="scope">
            {{ scope.row.approvalStatus==0?'待审核':scope.row.approvalStatus==10000?'通过':'驳回' }}
          </template>
        </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryOrgParams.pageNum"
      v-model:limit="queryOrgParams.pageSize"
      @pagination="getScoreList"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelDetail">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { approvalListOrg, approvalList } from "@/api/partybuilding/WorkScore";
const openDetailDialog = ref(false);
const { proxy } = getCurrentInstance();
const loading = ref(true);
const orgScoreList = ref([]);
const total = ref(0);
const typeVal = ref(null);
const monthOptions = ref([]);
const jiDuOptions = ref([]);
const halfYearOptions = ref([]);
const activeName = ref("first");
const curYear = ref(null);
curYear.value = new Date().getFullYear();
const scoreSumVal = ref(null);

function getInitDictOptions() {
  monthOptions.value = [];
  for (let i = 1; i <= 12; i++) {
    monthOptions.value.push({ value: i, label: i + "月" });
  }

  jiDuOptions.value = [];
  jiDuOptions.value.push({ value: 1, label: "第一季度" });
  jiDuOptions.value.push({ value: 2, label: "第二季度" });
  jiDuOptions.value.push({ value: 3, label: "第三季度" });
  jiDuOptions.value.push({ value: 4, label: "第四季度" });

  halfYearOptions.value = [];
  jiDuOptions.value.push({ value: 1, label: "上半年" });
  jiDuOptions.value.push({ value: 2, label:  "下半年" });
}

const data = reactive({
  form: {},
  queryOrgParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    userId: null,
    deptId: null,
    yearSign: null
  },
  rules: {}
});

const { queryOrgParams, form, rules } = toRefs(data);

const refresh = (deptId, year, type, scoreSum) => {
  queryOrgParams.value.yearSign = year;
  typeVal.value = type;
  scoreSumVal.value = scoreSum;
  if (typeVal.value == 0) {//0个人积分，1组织积分
    queryOrgParams.value.userId = deptId;
    queryOrgParams.value.deptId = undefined;
  } else {
    queryOrgParams.value.userId = undefined;
    queryOrgParams.value.deptId = deptId;
  }
  getScoreList();
};

defineExpose({
    refresh
});

// 查询积分
function getScoreList() {
  if (typeVal.value == 0) {//0个人积分，1组织积分
    getMemberScoreList();
  } else {
    getOrgScoreList();
  }
}

/** 查询党员积分列表 */
function getMemberScoreList() {
  loading.value = true;
  let obj = {};
  obj.userId = queryOrgParams.value.userId;
  obj.yearSign = queryOrgParams.value.yearSign;
  let params = {
    pageNum: queryOrgParams.value.pageNum,
    pageSize: queryOrgParams.value.pageSize,
    orderByName: 'createTime',
    descIs: true
  };
  approvalList(params, obj).then(response => {
    openDetailDialog.value = true;
    orgScoreList.value = proxy.handleTree(response.rows);
    total.value = response.total;
    loading.value = false;
  });
}

/** 查询组织积分列表 */
function getOrgScoreList() {
  loading.value = true;
  let obj = {};
  obj.deptId = queryOrgParams.value.deptId;
  obj.yearSign = queryOrgParams.value.yearSign;
  let params = {
    pageNum: queryOrgParams.value.pageNum,
    pageSize: queryOrgParams.value.pageSize,
    orderByName: 'createTime',
    descIs: true
  };
  approvalListOrg(params, obj).then(response => {
    openDetailDialog.value = true;
    orgScoreList.value = proxy.handleTree(response.rows);
    total.value = response.total;
    loading.value = false;
  });
}

function cancelDetail() {
  openDetailDialog.value = false;
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('/partybuilding/WorkScore/exportApproval', {
    ...queryOrgParams.value
  }, `ScoreDetail_${new Date().getTime()}.xlsx`)
}

getInitDictOptions();
</script>
  
<style>
.el-tabs__content {
  height: 100% !important;
}
.pagination-container {
  margin-top: 0px!important;
  padding: 30px 9px!important;
}
.pagination-container .el-pagination {
  right: 20px!important;
  position: absolute;
}
.detailTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>